import { FC, useState } from "react";
import ChildComponent from "../childComponent";

const FatherComponent: FC = () => {
  // 定义要传递给子组件的数据
  const [message, setMessage] = useState("这是来自父组件的消息");
  const [count, setCount] = useState(10);
  // // 定义接收子组件数据的回调函数
  const handleChildMessage = (newMessage: string) => {
    setMessage(newMessage);
  };
  // const people = [
  //     '凯瑟琳·约翰逊: 数学家',
  //     '马里奥·莫利纳: 化学家',
  //     '穆罕默德·阿卜杜勒·萨拉姆: 物理学家',
  //     '珀西·莱温·朱利亚: 化学家',
  //     '苏布拉马尼扬·钱德拉塞卡: 天体物理学家',
  //   ];
  // let index = 1
  // function handleClick() {
  //     index = index + 1;
  // }
  // const [position, setPosition] = useState({
  //     x: 0,
  //     y: 0
  // });
  return (
    <div>
      {/* {(() => {
                if (0) {
                    return message;
                }else{
                    return <p>123</p>
                }
            })()}
            {1 ? message : <p>123</p>} */}

      {/* {people.map((item,index)=>{
                return <p key={index}>{item}</p>
            })} */}
      {/* {people.filter((item,index)=>{
                return item.includes("数学家")
            })} */}

      <ChildComponent
        message={message}
        count={count}
        onMessageChange={handleChildMessage}
        onButtonClick={() => setCount(count + 1)}
      />

      {/* <button onClick={handleClick}>
                Next
            </button>
            {index} */}

      {/* <button onClick={handleClick}>
                Next
            </button>
            {index} */}
      {/* <div
                onPointerMove={e => {
                    // position.x = e.clientX;
                    // position.y = e.clientY;
                    setPosition({
                        x: e.clientX,
                        y: e.clientY
                    });
                }}
                style={{
                    position: 'relative',
                    width: '100vw',
                    height: '100vh',
                }}>
                <div style={{
                    position: 'absolute',
                    backgroundColor: 'red',
                    borderRadius: '50%',
                    transform: `translate(${position.x}px, ${position.y}px)`,
                    left: -10,
                    top: -10,
                    width: 20,
                    height: 20,
                }} />
            </div> */}
    </div>
  );
};

export default FatherComponent;
